<template>
  <a-config-provider :get-popup-container="getPopupContainer" :locale="zhCN">
    <div class="main-app">
      <a-layout class="h-full">
        <a-layout-sider v-model:collapsed="collapsed" collapsible>
          <div class="logo text-white text-center leading-8">
            <span>微前端</span>
          </div>
          <a-menu v-model:selectedKeys="selectedKeys" mode="inline" theme="dark">
            <a-menu-item key="/">
              <pie-chart-outlined />
              <!--<span>111</span>-->
              <router-link to="/" style="margin-left: 10px">首页</router-link>
            </a-menu-item>
            <a-menu-item key="/about">
              <pie-chart-outlined />
              <!--<span>222</span>-->
              <router-link to="/about" style="margin-left: 10px">主-about</router-link>
            </a-menu-item>
            <a-menu-item key="/micro-app-vue3">
              <desktop-outlined />
              <!--<span>333</span>-->
              <router-link to="/micro-app-vue3" style="margin-left: 10px"> 子应用首页 </router-link>
            </a-menu-item>
            <!--<a-menu-item key="/micro-app-vite-vue3">-->
            <!--  <desktop-outlined />-->
            <!--  &lt;!&ndash;<span>444</span>&ndash;&gt;-->
            <!--  <router-link to="/micro-app-vite-vue3" style="margin-left: 10px">-->
            <!--    教师工作台-->
            <!--  </router-link>-->
            <!--</a-menu-item>-->

            <a-menu-item key="/app-vite">
              <desktop-outlined />
              <!--<span>444</span>-->
              <router-link to="/app-vite" style="margin-left: 10px"> vite-demo </router-link>
            </a-menu-item>
          </a-menu>
        </a-layout-sider>
        <a-layout>
          <!--<a-layout-header class="!bg-white !p-0">-->
          <!--  <a-menu-->
          <!--    v-model:selectedKeys="selectedKeysNav"-->
          <!--    mode="horizontal"-->
          <!--    :style="{ lineHeight: '64px' }"-->
          <!--  >-->
          <!--    <a-menu-item key="a">nav 1</a-menu-item>-->
          <!--    <a-menu-item key="b">nav 2</a-menu-item>-->
          <!--    <a-menu-item key="c">nav 3</a-menu-item>-->
          <!--  </a-menu>-->
          <!--</a-layout-header>-->
          <a-layout-content class="px-4 main-content">
            <a-breadcrumb class="!my-4">
              <a-breadcrumb-item>User</a-breadcrumb-item>
              <a-breadcrumb-item>Bill</a-breadcrumb-item>
            </a-breadcrumb>
            <div class="p-4 bg-white min-h-[360px]">
              <div class="p-6 shadow">
                <Typography.Title :level="3">Main App.vue</Typography.Title>
                <!--<Typography.Title :level="4">数据通信</Typography.Title>-->

                <!--<div class="flex gap-3">-->
                <!--  <a-button @click="dispatchChildrenData">基座派发自定义数据</a-button>-->
                <!--</div>-->
              </div>
              <a-divider class="!my-8">分割线</a-divider>
              <router-view class="mt-4 shadow p-4" />
            </div>
          </a-layout-content>
        </a-layout>
      </a-layout>
    </div>
  </a-config-provider>
</template>

<script setup>
  import zhCN from 'ant-design-vue/es/locale/zh_CN';
  import dayjs from 'dayjs';
  import 'dayjs/locale/zh-cn';
  import {
    PieChartOutlined,
    DesktopOutlined,
    UserOutlined,
    TeamOutlined,
    FileOutlined,
  } from '@ant-design/icons-vue';
  import { ref } from 'vue';
  import { Typography } from 'ant-design-vue';

  dayjs.locale('en');

  function getPopupContainer(el, dialogContext) {
    if (dialogContext) {
      return dialogContext.getDialogWrap();
    } else {
      return document.body;
    }
  }

  const selectedKeys = ref(['/']);
  // const selectedKeysNav = ref(['a']);
  const collapsed = ref(false);
</script>

<style>
  body {
    height: 100vh;
  }
  #app {
    height: 100%;
    overflow: auto;
  }
  ::-webkit-scrollbar {
    width: 12px;
    height: 12px;
  }

  ::-webkit-scrollbar:hover {
    width: 20px;
    height: 20px;
  }

  ::-webkit-scrollbar-thumb {
    border-radius: 10px;
    background-color: #c1c1c1;
    border: 2px solid transparent;
    background-clip: padding-box;
  }

  ::-webkit-scrollbar-thumb:hover {
    background-color: #a9a9a9;
  }
</style>
<style lang="less" scoped>
  .main-app {
    height: 100%;
    overflow: auto;
  }
  .logo {
    height: 32px;
    margin: 16px;
    background: rgba(255, 255, 255, 0.3);
  }
  .main-content {
    height: 100%;
    overflow: auto;
    padding-bottom: 16px;
  }
</style>
